//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import moment from 'moment';
import {
    Row,
    Col,
    Form,
    Input,
    Button,
    DatePicker,
    Modal,
} from 'antd';

const FormItem = Form.Item;



//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            id: props.values.id,
            opername: props.values.opername,
            opertype: props.values.opertype,
            class_method: props.values.class_method,
            http_method: props.values.http_method,
            http_url: props.values.http_url,
            http_params: props.values.http_params,
            http_body: props.values.http_body,
            http_header: props.values.http_header,
            content: props.values.content,
            cost: props.values.cost,
            createip: props.values.createip,
            createuser: props.values.createuser,
            createdate: props.values.createdate,
            memo: props.values.memo,
            client_type: props.values.client_type,
        },
    };


}



renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>



                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
                    <FormItem  label="操作名称">
                        {form.getFieldDecorator('opername', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作名称！', min: 5 }],
                        initialValue: formVals.opername,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
                    <FormItem  label="操作类型">
                        {form.getFieldDecorator('opertype', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作类型！', min: 5 }],
                        initialValue: formVals.opertype,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>

                    <Col  md={12} sm={24}>
                    <FormItem  label="操作类方法">
                        {form.getFieldDecorator('class_method', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作类方法！', min: 5 }],
                        initialValue: formVals.class_method,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
                    <FormItem  label="操作url">
                        {form.getFieldDecorator('http_url', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作url！', min: 5 }],
                        initialValue: formVals.http_url,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="方法类型">
	                        {form.getFieldDecorator('http_method', {
	                        rules: [{ required: true, message: '请输入至少五个字符的方法类型！', min: 5 }],
	                        initialValue: formVals.http_method,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                   	<Col  md={12} sm={24}>
	                    <FormItem  label="操作内容">
	                        {form.getFieldDecorator('content', {
	                        rules: [{ required: true, message: '请输入至少五个字符的操作内容！', min: 5 }],
	                        initialValue: formVals.content,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>




                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="操作参数">
                        {form.getFieldDecorator('http_params', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作参数！', min: 5 }],
                        initialValue: formVals.http_params,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="操作body参数">
                        {form.getFieldDecorator('http_body', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作body参数！', min: 5 }],
                        initialValue: formVals.http_body,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="操作header参数">
                        {form.getFieldDecorator('http_header', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作header参数！', min: 5 }],
                        initialValue: formVals.http_header,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="设备类型">
                        {form.getFieldDecorator('client_type', {
                        rules: [{ required: true, message: '请输入至少五个字符的设备类型！', min: 5 }],
                        initialValue: formVals.client_type,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                


                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="耗时">
                        {form.getFieldDecorator('cost', {
                        rules: [{ required: true, message: '请输入至少五个字符的耗时！', min: 5 }],
                        initialValue: formVals.cost,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="ip地址">
                        {form.getFieldDecorator('createip', {
                        rules: [{ required: true, message: '请输入至少五个字符的ip地址！', min: 5 }],
                        initialValue: formVals.createip,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="操作用户">
                        {form.getFieldDecorator('createuser', {
                        rules: [{ required: true, message: '请输入至少五个字符的操作用户！', min: 5 }],
                        initialValue: formVals.createuser,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>




                    <Col  md={12} sm={24}>
                      <FormItem  label="日期">
                       {form.getFieldDecorator('createdate', {
                        rules: [{ required: false, message: '请输入日期！'}],
                        initialValue: moment(formVals.createdate),

                        })(<DatePicker readOnly format={"YYYY-MM-DD HH:mm:ss"} style={{ width: '100%' }} placeholder="请输入日期" />)}
                      </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="备注">
                        {form.getFieldDecorator('memo', {
                        rules: [{ required: true, message: '请输入至少五个字符的备注！', min: 5 }],
                        initialValue: formVals.memo,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                </Row>



    </Form>
);

};


render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick={ () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(values)}
</Modal>
);
}

}

export default ViewForm;

